<template>
  <div v-loading="listLoading" style="height:auto;width:100%">
    <el-row style="background:#fafafa;height:50px;width:99%">
      <label style="display:inline-block;width:25%;text-align:center;line-height:50px;font-size:14px">商品</label>
      <label style="display:inline-block;width:15%;text-align:center;line-height:50px;font-size:14px">销售价</label>
      <label style="display:inline-block;width:10%;text-align:center;line-height:50px;font-size:14px">数量</label>
      <label style="display:inline-block;width:15%;text-align:center;line-height:50px;font-size:14px">应付</label>
      <label style="display:inline-block;width:10%;text-align:center;line-height:50px;font-size:14px">小康币抵扣</label>
      <label style="display:inline-block;width:10%;text-align:center;line-height:50px;font-size:14px">实付</label>
      <label style="display:inline-block;width:12%;text-align:center;line-height:50px;font-size:14px">操作状态</label>
    </el-row>
    <table v-for="(item,index) in list" :key="index" style="width:99%;height:auto;margin-top:20px">
      <thead style="background:#fafafa;height:auto;">
        <tr style="height:50px;"> 
          <td width="10%"><p style="float:right;margin-bottom:0">订单号：</p></td>
          <td width="15%">{{item.orderNum}}</td>
          <td width="15%" align="center">下单时间：{{item.createTime}}</td>
          <td width="10%">{{item.nickName}}：{{item.phoneNum}}</td>
          <td width="15%" style="font-size:12px" align="center">收货地址：{{item.address}}</td>
          <td width="10%"><p v-if="item.status==40 || item.status==50" style="float:right;margin-bottom:0">运单信息:</p></td>
          <td width="10%"><p v-if="item.status==50" style="margin-bottom:0">{{item.transNo}}</p><el-button v-if="item.status==40" type="primary" size="small" @click='addWaybill(item)'>添加运单信息</el-button></td>
          <td width="15%" align="center">{{item.status=='10'?'待付款':item.status==='40'?'待收货':item.status==='50'?'交易成功':item.status==='70'?'交易成功，用户删除':'暂无'}}</td>
        </tr> 
      </thead>
      <tbody v-for="(p,i) in item.detailList" :key="i" style="border:1px solid #E4E4E4;border-top:0">
        <tr>
          <td width="10%" rowspan="2">
            <img :src="p.proImageUrl" width="100" height="100" style="margin-left:20px" alt="">
          </td>
          <td width="15%" style="padding-left: 0px !important;" class="pname">
            <strong>{{p.proName}}</strong>
          </td>
          <td width="15%" style="text-align:center">
            {{p.currentPrice/100}}
          </td>
          <td width="10%" align="center">
            {{p.proAmount}}
          </td>
          <td width="15%" align="center">
            {{p.proTotalPrice/100}}
          </td>
          <td width="11%" align="center">
          </td>
          <td width="9%" align="center">
          </td>
          <td width="15%" align="center">
          </td>
        </tr>
          <tr>
          <td colSpan="1" className="tableBoo" >
            <strong>型号:</strong>
            <span>{{p.proPriceName}}</span>
          </td>
          <td colSpan="6" className="tableBoo" align="center">
            
          </td>
        </tr>
      </tbody>
      <tfoot style="border:1px solid #E4E4E4;border-top:0">
        <tr style="height:50px">
          <td width="10%" align="center">渠道：{{item.channelType}}</td>
          <td width="15%" align="center">优惠券：{{item.ticket/100}}</td>
          <td width="15%"></td>             
          <td width="10%" align="center">合计：</td>
          <td width="15%" align="center">{{item.sumMoney/100}}</td>
          <td width="10%" align="center">{{item.xkb/100}}</td>
          <td width="10%" align="center">{{item.paidMoney/100}}</td>
          <td width="15%"></td>
        </tr>
      </tfoot>
    </table>
     <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :append-to-body="true"
      title="添加物流信息"
      :visible.sync="dialogFormVisible"
      width="40%">  
      <el-form
        label-position="left"
        label-width="150px"
        :model="temp"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="快递公司：">
          <el-input   v-model="temp.transCo"/>
        </el-form-item>
        <el-form-item label="快递单号：">
          <el-input   v-model="temp.transNo"/>
        </el-form-item>
      </el-form>  
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData">确 定</el-button>
      </span>
    </el-dialog>
  </div> 
</template>


<script>

import { getOrderList,addTrans } from '@/api/orderList'
import Pagination from '@/components/Pagination' 

  export default {
    inject:["reload"],
    components: { Pagination },
    props:{
      value1:{
        type:Array,
        required:true
      },
      orderName:{
        type:String,
        required:true
      },
      phone:{
        type:String,
        required:true
      },
      // tabName:{
      //   type:String,
      //   required:true
      // },
      allStatus:{
        type:String,
        required:true
      }
    },
    data() {
      return {
        list:null,
        total:0,
        listQuery:{
          pageNum:1,
          pageSize:10
        },
        listLoading:true,
        begin:'',
        end:'',
        // allStatus:'',
        dialogFormVisible:false,
        orderId:'',
        temp:{
          orderId:''
        },
        // company:'',
        // express:''
      }
    },
    created(){
      this.getList()
    },
    methods:{
      // console.log(this.value1)
      addWaybill(item){
        this.dialogFormVisible=true
        this.orderId=item.orderId 
        console.log(item)  
        this.temp = Object.assign({}, item)
      },
      addData(){
        this.temp.orderId=this.orderId
        addTrans(this.temp).then(res=>{
          if(res.code==='200'){
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          } 
          this.dialogFormVisible=false
          this.reload()
        })
      },
      getList(){
        this.listLoading = true
        if(this.value1!==null){
          if(this.value1.length>=2){
          this.begin=this.value1[0]
          this.end=this.value1[1]
          }else{
            this.begin=''
            this.end=''
          }
        }else{
          this.begin=''
          this.end=''
        }
        var params={
          pageNum:this.listQuery.pageNum,
          pageSize:this.listQuery.pageSize,
          beginTime:this.begin,
          endTime:this.end,
          orderNum:this.orderName,
          phoneNum:this.phone,
          status:this.allStatus
        }
        getOrderList(params).then(res=>{
          this.list=res.content
          this.total=res.totalPages
          this.listLoading = false
        })
      }
    }
  }
  

</script>